<template>
    <el-radio-group
                    ref="elRadioGroup"
                    :value="value"
                    v-bind="originProp"
                    v-on:focus="($event)=>{$emit('focus', $event)}"
                    v-on:blur="($event)=>{$emit('blur', $event)}"
                    v-on:change="(val)=>{$emit('change', val)}"
                    v-on:input="(val)=>{$emit('input', val)}"
    >
        <el-radio v-for="item in localData"
                :disabled="!!item.disabled"
                :label="$stObjectTools.getValue(item,optionProp.value)"
                :key="$stObjectTools.getValue(item,optionProp.value)" >{{$stObjectTools.getValue(item,optionProp.label)}}</el-radio>
    </el-radio-group>
</template>


<script>
    export default {
        name: 'StElRadioGroup',
        props: {
            value: {},
            // 被包装组件的原始属性
            originProp: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            // 自定义数据
            datas: {
                type: [Array, String],
                default: function () {
                    return []
                }
            },
            // 选项配置
            optionProp: {
                type: Object,
                default: function () {
                    return {
                        value: 'id', // 选中的值属性
                        label: 'name' // 显示的值属性
                    }
                }
            },
        },
        data() {
            return {
                localData: []
            }
        },
        mounted() {
            this.initData(this.datas)
        },
        methods: {
            selectedDataEmit(val){
                this.$emit('data', this.getSelectData(val))
            },
            // 获取选中的数据本身
            getSelectData(val) {
                if (val == null || val == undefined) {
                    return null
                }
                return this.localData.filter(item => val == this.$stObjectTools.getValue(item, this.optionProp.value)).pop() || null

            },
            // 根据url加载数据
            initDataByUrl(url) {
                this.axios.get(url).then(res => {
                    this.localData = res.data
                }).catch(error => {
                    this.localData = []
                    if (error.response) {
                        if (error.response.status == 401) {
                            return
                        }
                        if(error.response.data && error.response.data.errorMsg){
                            if (error.response.status != 404) {
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }

                    } else {
                        this.$message.error('网络错误或服务不可用')
                    }
                })
            },
            // 加载
            initData(data) {
                if (!data) {
                    return
                }
                if (this.$stArrayTools.isArray(data)) {
                    this.localData = data
                } else if (this.$stStringTools.isString(data)) {
                    this.initDataByUrl(data)
                } else if (this.$stFunctionTools.isFunction(data)) {
                    this.initData(data())
                }
            },
        },
        watch: {
            datas(val) {
                this.initData(val)
            },
            value(val) {
                this.selectedDataEmit(val)
            },
            localData() {
                this.selectedDataEmit(this.value)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
